<template>
  <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
    <a-card>
      <div style="margin-bottom: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.log.taskName')">
                <a-input
                  allowClear
                  :placeholder="t('sys.form.placeholder.taskName')"
                  v-model:value="formState.name"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.analysis.columns.liststatus')">
                <a-select
                  :placeholder="t('sys.form.placeholder.status')"
                  allowClear
                  v-model:value="formState.listStatus"
                >
                  <a-select-option
                    v-for="(item, index) in listStatusList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.analysis.columns.detailStatus')">
                <a-select
                  :placeholder="t('sys.form.placeholder.status')"
                  allowClear
                  v-model:value="formState.detailStatus"
                >
                  <a-select-option
                    v-for="(item, index) in statudetailsList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button :icon="h(SearchOutlined)" @click="queryRef" type="primary">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
                <a-button @click="addClcick" :icon="h(PlusOutlined)" type="primary">
                  {{ t('sys.configuration.add') }}
                </a-button>
                <a-button @click="batchAddClick" :icon="h(PlusOutlined)" type="primary">
                  {{ t('sys.task.batchAdd') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-alert class="mb-2 mt-2" show-icon type="info">
        <template #message>
          <div>
            <span>
              <div>
                <div class="ml-2">
                  {{ t('sys.analysis.columns.liststatus') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifoData.listResponse.allCount }}
                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(0)"
                  >
                    {{ t('sys.configuration.hasnotProgress') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.listResponse.stopCount }}
                    </span>
                  </a-button>

                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(1)"
                  >
                    {{ t('sys.configuration.inService') }}:
                    <span class="text-green-500">
                      {{ StatisticsInifoData.listResponse.runingCount }}
                    </span>
                  </a-button>

                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(3)"
                  >
                    {{ t('sys.configuration.waiting') }}:
                    <span class="text-orange-500">
                      {{ StatisticsInifoData.listResponse.waitCount }}
                    </span>
                  </a-button>

                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(2)"
                  >
                    {{ t('sys.statistics1.Listcompleted') }}:
                    <span class="text-green-500">
                      {{ StatisticsInifoData.listResponse.completeCount }}
                    </span>
                  </a-button>

                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(4)"
                  >
                    {{ t('sys.statistics1.datadeficiencies') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.listResponse.dataLackCount }}
                    </span>
                  </a-button>
                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(5)"
                  >
                    {{ t('sys.configuration.manualStart') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.listResponse.manualStartCount }}
                    </span>
                  </a-button>
                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick(6)"
                  >
                    {{ t('sys.configuration.manualStop') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.listResponse.manualStopCount }}
                    </span>
                  </a-button>
                </div>
                <div class="mt-2 ml-2">
                  {{ t('sys.analysis.columns.detailStatus') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifoData.detailResponse.allCount }}
                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick2(0)"
                  >
                    {{ t('sys.configuration.hasnotProgress') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.detailResponse.stopCount }}
                    </span>
                  </a-button>

                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick2(1)"
                  >
                    {{ t('sys.configuration.inService') }}:
                    <span class="text-green-500">
                      {{ StatisticsInifoData.detailResponse.runingCount }}
                    </span>
                  </a-button>

                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick2(2)"
                  >
                    {{ t('sys.configuration.waiting') }}:
                    <span class="text-orange-500">
                      {{ StatisticsInifoData.detailResponse.waitCount }}
                    </span>
                  </a-button>
                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick2(3)"
                  >
                    {{ t('sys.configuration.manualStart') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.detailResponse.manualStartCount }}
                    </span>
                  </a-button>
                  <a-button
                    class="ml-1"
                    size="small"
                    type="primary"
                    style="cursor: pointer"
                    @click="handleClick2(4)"
                  >
                    {{ t('sys.configuration.manualStop') }}:
                    <span class="text-red-500">
                      {{ StatisticsInifoData.detailResponse.manualStopCount }}
                    </span>
                  </a-button>
                </div>
              </div>
            </span>
          </div>
        </template>
      </a-alert>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :scroll="{ x: 1500 }"
        :columns="columns"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button @click="drawerBoxClick(record)" type="link">{{
              t('sys.analysis.everyrecord')
            }}</a-button>
            <a-popconfirm
              @confirm="Taskconfirm(record)"
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>

          <template v-if="column.dataIndex === 'detailStatus'">
            <a-tag v-if="record.detailStatus == 0" color="red">{{
              t('sys.configuration.hasnotProgress') +
              (record.detailStopReason != null ? '(' + record.detailStopReason + ')' : '')
            }}</a-tag>
            <a-tag v-if="record.detailStatus == 1" color="green">{{
              t('sys.configuration.inService') +
              (record.detailStopReason != null ? '(' + record.detailStopReason + ')' : '')
            }}</a-tag>
            <a-tag v-if="record.detailStatus == 2" color="orange">{{
              t('sys.configuration.waiting')
            }}</a-tag>
            <span class="text-red-500">{{ record.sysFbInfoStatisticsDetail.noPassCount }}</span
            >/ <span class="text-green-500">{{ record.sysFbInfoStatisticsDetail.passCount }}</span
            >/
            <span class="text-orange-500">{{ record.sysFbInfoStatisticsDetail.remainCount }}</span>
            <a-popconfirm
              v-if="record.detailStatus == 0"
              @confirm="TaskconfirmDetalisStop(record, 1)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.start') +
                t('sys.configuration.stopEveryDetails')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.start') }}
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              v-else
              @confirm="TaskconfirmDetalisStop(record, 2)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.cease') +
                t('sys.configuration.stopEveryDetails')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.cease') }}
              </a-button>
            </a-popconfirm>
          </template>
          <templte v-if="column.dataIndex === 'statisticResult'">
            <span>{{ record.sysFbInfoStatisticsDetail.allCount }}</span
            >/ <span class="text-green-500">{{ record.sysFbInfoStatisticsDetail.passCount }}</span
            >/ <span class="text-red-500">{{ record.sysFbInfoStatisticsDetail.noPassCount }}</span
            >/
            <span class="text-orange-500">{{
              record.sysFbInfoStatisticsDetail.duplicateCount
            }}</span>
          </templte>
          <template v-if="column.dataIndex === 'listStatus'">
            <a-tag v-if="record.listStatus == 0" color="red">{{
              t('sys.configuration.hasnotProgress') +
              (record.listStopReason != null ? '(' + record.listStopReason + ')' : '')
            }}</a-tag>
            <a-tag v-if="record.listStatus == 2" color="orange">{{
              t('sys.configuration.waiting')
            }}</a-tag>
            <a-tag v-if="record.listStatus == 1" color="green">{{
              t('sys.configuration.inService') +
              (record.listStopReason != null ? '(' + record.listStopReason + ')' : '')
            }}</a-tag>
            <a-tag v-if="record.listStatus == 3" color="green">{{
              t('sys.configuration.inService')
            }}</a-tag>
            <a-tag v-if="record.listStatus == 4" color="green">{{
              t('sys.configuration.inService')
            }}</a-tag>
            <a-button @click="drawerTaskcountBoxClick(record)" type="link"
              >{{ record.useCount ? record.useCount : 0 }}/{{
                record.count ? record.count : '0'
              }}</a-button
            >
            <a-popconfirm
              v-if="record.listStatus == 0"
              @confirm="TaskconfirmStop(record, 1)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.start') +
                t('sys.configuration.stopEvery')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.start') }}
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              v-else
              @confirm="TaskconfirmStop(record, 2)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.cease') +
                t('sys.configuration.stopEvery')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.cease') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'windowCount'">
            <a-button @click="drawerTaskNumBoxClick(record)" type="link"
              >{{ record.useWindowCount ? record.useWindowCount : '0' }}/{{
                record.windowCount ? record.windowCount : '0'
              }}</a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      v-model:open="DrawerShow"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :size="'large'"
      title="新增"
      placement="right"
    >
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 10 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item
              :label="t('sys.userlist.columns.taskMaxNum')"
              name="count"
              :rules="[
                {
                  required: true,
                  message:
                    t('sys.configuration.pleaseenter') + t('sys.userlist.columns.taskMaxNum'),
                },
              ]"
            >
              <a-input-number v-model:value="formState.count" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              name="windowCount"
              :rules="[
                {
                  required: true,
                  message:
                    t('sys.configuration.pleaseenter') + t('sys.userlist.columns.windowCount'),
                },
              ]"
              :label="t('sys.userlist.columns.windowCount')"
            >
              <a-input-number v-model:value="formState.windowCount" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="m-t-10px m-b-10px">{{ t('sys.task.filterRules') }}</div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item :label="t('sys.script.columns.name')" name="name">
              <a-input v-model:value="formState.name" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.city')" name="city">
              <a-input v-model:value="formState.city" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.work')" name="work">
              <a-input v-model:value="formState.work" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.school')" name="school">
              <a-input v-model:value="formState.school" />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="m-t-10px m-b-10px">{{ t('sys.task.collectionConditions') }}</div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="24">
            <a-form-item
              :label-col="{ span: 5 }"
              :label="t('sys.task.followerCount')"
              name="friend"
            >
              <a-row :gutter="20" style="display: flex; align-items: center">
                <a-col :span="3">{{ t('sys.task.minimumZero') }}</a-col>
                <a-col :span="6"> <a-input-number v-model:value="formState.minFriend" /> </a-col>
                <a-col :span="3">{{ t('sys.task.maximum') }}</a-col>
                <a-col :span="6"> <a-input-number v-model:value="formState.maxFriend" /> </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label-col="{ span: 5 }" :label="t('sys.task.lastPost')" name="city">
              <a-row :gutter="6" style="display: flex; align-items: center">
                <a-col :span="2">{{ t('sys.task.toDate') }}</a-col>
                <a-col :span="3"> <a-input v-model:value="formState.activeDays" /> </a-col>
                <a-col :span="3">{{ t('sys.task.daysWithin') }}</a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row v-if="rolesListID?.roleId == 1" :gutter="20">
          <a-col :span="24">
            <a-form-item
              :label-col="{ span: 5 }"
              :label="t('sys.task.userGroupIdgrtoup')"
              name="userGroupId"
            >
              <a-select
                v-model:value="formState.userGroupId"
                placeholder="请选择"
                style="width: 100%"
              >
                <a-select-option v-for="item in userGroupOptions" :key="item.id" :value="item.id">
                  {{ item.userGroupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="24">
            <a-form-item :label-col="{ span: 24 }" :label="t('sys.task.promptRulesCustom')">
              <a-row :gutter="[20, 20]" style="display: flex; align-items: center">
                <a-col
                  :key="value"
                  v-for="(key, value, index) in frompropLIST"
                  class="flex items-center"
                  :span="24"
                >
                  <PlusOutlined
                    v-if="index === Object.keys(frompropLIST).length - 1"
                    class="mr-[10px]"
                    @click="addFriend(index)"
                  />
                  <MinusOutlined
                    v-if="index != Object.keys(frompropLIST).length - 1"
                    class="mr-[10px]"
                    @click="deleteFriend(value)"
                  />
                  <a-input
                    @input="console.log(value)"
                    v-model:value="frompropLIST[value]"
                    placeholder="请输入"
                  />
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button type="primary" html-type="submit">{{
            t('sys.configuration.confirm')
          }}</a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
    <!-- 批量新增任务弹窗 -->
    <a-drawer
      v-model:open="BatchDrawerShow"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :size="'large'"
      :title="t('sys.configuration.batchAddTask')"
      placement="right"
    >
      <a-form
        :model="batchFormState"
        name="batchForm"
        :label-col="{ span: 10 }"
        autocomplete="off"
        @finish="onBatchFinish"
      >
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item
              :label="t('sys.userlist.columns.taskMaxNum')"
              name="count"
              :rules="[
                {
                  required: true,
                  message:
                    t('sys.configuration.pleaseenter') + t('sys.userlist.columns.taskMaxNum'),
                },
              ]"
            >
              <a-input-number v-model:value="batchFormState.count" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              name="windowCount"
              :rules="[
                {
                  required: true,
                  message:
                    t('sys.configuration.pleaseenter') + t('sys.userlist.columns.windowCount'),
                },
              ]"
              :label="t('sys.userlist.columns.windowCount')"
            >
              <a-input-number v-model:value="batchFormState.windowCount" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="m-t-10px m-b-10px">{{ t('sys.task.filterRules') }}</div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item :label="t('sys.script.columns.name')" name="names">
              <a-textarea
                v-model:value="batchFormState.names"
                placeholder="每行输入一个名称"
                :rows="4"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.city')" name="cities">
              <a-textarea
                v-model:value="batchFormState.cities"
                placeholder="每行输入一个城市"
                :rows="4"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.work')" name="work">
              <a-input v-model:value="batchFormState.work" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.school')" name="school">
              <a-input v-model:value="batchFormState.school" />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="m-t-10px m-b-10px">{{ t('sys.task.collectionConditions') }}</div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="24">
            <a-form-item
              :label-col="{ span: 5 }"
              :label="t('sys.task.followerCount')"
              name="friend"
            >
              <a-row :gutter="20" style="display: flex; align-items: center">
                <a-col :span="3">{{ t('sys.task.minimumZero') }}</a-col>
                <a-col :span="6">
                  <a-input-number v-model:value="batchFormState.minFriend" />
                </a-col>
                <a-col :span="3">{{ t('sys.task.maximum') }}</a-col>
                <a-col :span="6">
                  <a-input-number v-model:value="batchFormState.maxFriend" />
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label-col="{ span: 5 }" :label="t('sys.task.lastPost')" name="city">
              <a-row :gutter="6" style="display: flex; align-items: center">
                <a-col :span="2">{{ t('sys.task.toDate') }}</a-col>
                <a-col :span="3"> <a-input v-model:value="batchFormState.activeDays" /> </a-col>
                <a-col :span="3">{{ t('sys.task.daysWithin') }}</a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider v-if="rolesListID?.roleId == 1" />
        <a-row v-if="rolesListID?.roleId == 1" :gutter="20">
          <a-col :span="24">
            <a-form-item
              :label-col="{ span: 5 }"
              :label="t('sys.task.userGroupIdgrtoup')"
              name="userGroupId"
            >
              <a-select
                v-model:value="batchFormState.userGroupId"
                placeholder="请选择"
                style="width: 100%"
              >
                <a-select-option v-for="item in userGroupOptions" :key="item.id" :value="item.id">
                  {{ item.userGroupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="24">
            <a-form-item :label-col="{ span: 24 }" :label="t('sys.task.promptRulesCustom')">
              <a-row :gutter="[20, 20]" style="display: flex; align-items: center">
                <a-col
                  :key="value"
                  v-for="(key, value, index) in batchFrompropLIST"
                  class="flex items-center"
                  :span="24"
                >
                  <PlusOutlined
                    v-if="index === Object.keys(batchFrompropLIST).length - 1"
                    class="mr-[10px]"
                    @click="addBatchFriend(index)"
                  />
                  <MinusOutlined
                    v-if="index != Object.keys(batchFrompropLIST).length - 1"
                    class="mr-[10px]"
                    @click="deleteBatchFriend(value)"
                  />
                  <a-input
                    @input="console.log(value)"
                    v-model:value="batchFrompropLIST[value]"
                    placeholder="请输入"
                  />
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 预览生成的任务 -->
        <div class="m-t-10px m-b-10px">{{ t('sys.task.taskPreview') }}</div>
        <a-divider />
        <div v-if="batchTaskPreview.length > 0" class="mb-4">
          <a-alert
            :message="`将生成 ${batchTaskPreview.length} 个任务`"
            type="info"
            show-icon
            class="mb-2"
          />
          <a-table
            :columns="previewColumns"
            :dataSource="batchTaskPreview"
            :pagination="false"
            size="small"
            :scroll="{ y: 200 }"
          />
        </div>

        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button type="primary" html-type="submit" :loading="batchSubmitting">
            {{ batchSubmitting ? t('sys.task.submitting') : t('sys.task.batchSubmit') }}
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
    <a-drawer
      v-model:open="DrawerDetalsShow"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :size="'large'"
      :title="t('sys.script.details')"
      placement="right"
    >
      <a-form name="basic" :layout="'vertical'" autocomplete="off">
        <a-descriptions bordered :title="t('sys.script.essential')">
          <a-descriptions-item :label="t('sys.script.username')">{{
            formDetails.name
          }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.script.avatar')">
            <a-image width="50px" height="50px" :src="formDetails.avatarUrl" />
          </a-descriptions-item>
          <a-descriptions-item :label="t('sys.configuration.describe')">{{
            formDetails.other
          }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.script.friend')">
            {{ formDetails.header }}位
          </a-descriptions-item>
          <a-descriptions-item :label="t('sys.script.maritalstatus')">
            {{ formDetails.profile }}</a-descriptions-item
          >
        </a-descriptions>
        <a-form-item :label="t('sys.video.columns.Photo')">
          <a-row :gutter="[20, 20]">
            <a-col
              v-for="(item, index) in formDetails.photoList"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
            >
              <CardItem :imagesrc="item" :imageText="formDetails.photosDescriptionList[index]" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item :label="t('sys.video.columns.invitation')" name="work">
          <a-row :gutter="[20, 20]">
            <a-col
              v-for="(item, index) in formDetails.postList"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
            >
              <CardItem :imagesrc="item" :imageText="formDetails.postsDescriptionList[index]" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item name="work">
          <a-popconfirm
            @confirm="gatherdetalsTaskconfirm"
            :title="t('sys.configuration.IsDelete')"
            :ok-text="t('sys.configuration.comfig')"
            :cancel-text="t('sys.configuration.cancel')"
          >
            <a-button danger type="primary"> {{ t('sys.configuration.delete') }} </a-button>
          </a-popconfirm>
        </a-form-item>
      </a-form>
    </a-drawer>
    <a-modal
      bordered
      width="80%"
      v-model:open="gatherShow"
      :title="t('sys.analysis.everyrecord')"
      centered
      @ok="gatherShow = false"
    >
      <a-alert class="mb-2 mt-2" show-icon type="info">
        <template #message>
          <div>
            <span>
              <div>
                <div class="ml-2">
                  {{ t('sys.statistics1.Remaining') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.detail.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.detail.allCount - StatisticsInifo.detail.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.detail.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.detail.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.detail.allCount -
                      StatisticsInifo.detail.passCount -
                      StatisticsInifo.detail.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.Report') }} : {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.process.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.process.allCount - StatisticsInifo.process.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.process.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.process.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.process.allCount -
                      StatisticsInifo.process.passCount -
                      StatisticsInifo.process.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.collectedDetails') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.avator.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.avator.allCount - StatisticsInifo.avator.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.avator.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.avator.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.avator.allCount -
                      StatisticsInifo.avator.passCount -
                      StatisticsInifo.avator.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.collectedDetailsExplain') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.image.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.image.allCount - StatisticsInifo.image.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.image.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.image.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.image.allCount -
                      StatisticsInifo.image.passCount -
                      StatisticsInifo.image.remainCount
                    }}
                  </span>
                </div>
              </div>
            </span>
          </div>
        </template>
      </a-alert>
      <a-table
        :scroll="{ x: 1500, y: 700 }"
        @change="gatherhandleTableChange"
        :pagination="gatherpagination"
        :columns="gathercolumns"
        :dataSource="gatherdataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'node'"> 节点{{ record.id }} </template>
          <template v-if="column.dataIndex === 'type'">
            <a-tag color="green"> 正常 </a-tag>
          </template>
          <template v-if="column.dataIndex === 'imageProcessStatus'">
            <a-tag
              v-if="record.detailStatus == 1 && record.imageProcessStatus == -1"
              color="orange"
            >
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag
              v-else-if="record.detailStatus == 1 && record.imageProcessStatus == 0"
              color="blue"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess8') }}
            </a-tag>
            <a-tag
              v-else-if="record.detailStatus == 1 && record.imageProcessStatus == 1"
              color="error"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>

            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'detailStatus'">
            <a-tooltip placement="top" trigger="click">
              <template #title>
                <p>
                  header :
                  {{
                    record.header != null && record.header != '' && record.header != -1
                      ? 'true'
                      : 'false'
                  }}
                </p>
                <p>
                  profile :{{
                    record.profile != null && record.profile != '' && record.profile != -1
                      ? 'true'
                      : 'false'
                  }}
                </p>
                <p>
                  photos :
                  {{ record.photoCount > 0 ? record.photoCount : 'false' }}</p
                >
                <p>
                  post :
                  {{ record.postCount > 0 ? record.postCount : 'false' }}</p
                >
              </template>
              <a-tag v-if="record.detailStatus == 0" color="green">
                {{ t('sys.configuration.taskprocess2') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == 1" color="blue">
                {{ t('sys.configuration.taskprocess1') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == -1" color="orange">
                {{ t('sys.configuration.taskprocess4') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == 2" color="error">
                {{ t('sys.configuration.taskprocess9') }}
              </a-tag>
              <!-- <a-tag color="red" v-else-if="record.infoStage == 3">
                {{ t('sys.configuration.infoStage3') }}
              </a-tag>
              <a-tag v-else-if="record.infoStage == 4">
                {{ t('sys.configuration.infoStage1') }}
              </a-tag>
              <a-tag v-else-if="record.infoStage == 5">
                {{ t('sys.configuration.infoStage2') }}
              </a-tag> -->
              <span v-else></span>
            </a-tooltip>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              :cancel-text="t('sys.common.no')"
              :ok-text="t('sys.common.yes')"
              @confirm="forgetClcick('detailStatus', record)"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'avatorStatus'">
            <a-tag
              v-if="record.imageProcessStatus == 0 && record.avatorStatus == -1"
              color="orange"
            >
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 0"
              color="green"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess2') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 1"
              color="blue"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess8') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 2"
              color="error"
            >
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'dataSource'">
            <a-tag v-if="record.dataSource == 1" color="orange">
              {{ t('sys.userlist.dataSourceType.1') }}
            </a-tag>
            <a-tag v-else-if="record.dataSource == 2" color="blue">
              {{ t('sys.userlist.dataSourceType.2') }}
            </a-tag>
            <a-tag v-else-if="record.dataSource == 3" color="green">
              {{ t('sys.userlist.dataSourceType.3') }}
            </a-tag>
            <span v-else></span>
          </template>

          <template v-if="column.dataIndex === 'imageStatus'">
            <a-tag v-if="record.avatorStatus == 1 && record.imageStatus == 1" color="blue">
              {{ t('sys.configuration.taskprocess1') }}
            </a-tag>
            <a-tag v-else-if="record.avatorStatus == 1 && record.imageStatus == -1" color="orange">
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag v-else-if="record.avatorStatus == 1 && record.imageStatus == 2" color="error">
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('imageStatus', record)"
            >
              <a-button v-if="record.avatorStatus == 1" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'analyzeStatus'">
            <a-tag v-if="record.imageStatus == 1 && record.analyzeStatus == 0" color="green">
              {{ t('sys.configuration.taskprocess2') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == 1" color="blue">
              {{ t('sys.configuration.taskprocess1') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == -1" color="orange">
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == 2" color="error">
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('analyzeStage', record)"
            >
              <a-button v-if="record.imageStatus == 1" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'stateStatus'">
            <a-tooltip placement="top" trigger="hover">
              <template v-if="record.stateStatus != 0 && record.stateStatus != 101" #title>
                <p>
                  {{ t('sys.userlist.Statusreason') }} : {{ record.stateRalevance }},{{
                    record.stateRalevanceId
                  }}
                </p>
              </template>
              <template v-if="record.stateStatus == 101" #title>
                <p>
                  {{ t('sys.userlist.Statusreasontermination') }} :
                  {{
                    record.endMessage != null
                      ? record.endMessage
                      : record.detailStopReason != null
                        ? record.detailStopReason
                        : record.imageProcessStopReason != null
                          ? record.imageProcessStopReason
                          : record.avatorDesc != null
                            ? record.avatorDesc
                            : record.imageStopReason != null
                              ? record.imageStopReason
                              : ''
                  }}</p
                >
              </template>
              <span
                v-for="(item, index) in statusTypeList"
                v-if="record.imageStatus != 101 && record.imageStatus != 0"
                :key="index"
              >
                <a-tag
                  v-if="record.imageStatus == 1 && item.value == record.stateStatus"
                  color="blue"
                >
                  {{ item.title }}
                </a-tag>
                <span v-else></span>
              </span>
              <a-tag v-if="record.stateStatus == 101" color="error">
                {{ t('sys.configuration.taskprocess11') }}
              </a-tag>
            </a-tooltip>
            <!-- <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              ok-text="Yes"
              cancel-text="No"
              @confirm="forgetClcick('state', record)"
            >
              <a-button v-if="record.imageStatus != 2" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm> -->
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-button @click="drawerDetalisBoxClick(record)" type="link">
              {{ t('sys.configuration.particulars') }}
            </a-button>
            <a-popconfirm
              @confirm="gatherTaskconfirm(record)"
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      bordered
      width="80%"
      v-model:open="drawerTaskNum"
      :title="t('sys.task.windowList')"
      centered
      @ok="drawerTaskNum = false"
    >
      <a-table
        :scroll="{ x: 1000, y: 700 }"
        :pagination="false"
        :columns="configTaskNumcolumns"
        :dataSource="gatherTaskNumdataSourcm"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'status'">
            <a-tag v-if="record.status == 0" color="red">{{ t('sys.analysis.offLine') }}</a-tag>
            <a-tag v-else-if="record.status == 2" color="green">{{
              t('sys.configuration.busy')
            }}</a-tag>
            <a-tag v-else-if="record.status == 1" color="orange">{{
              t('sys.configuration.leisure')
            }}</a-tag>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'options'">
            <a-dropdown v-model:open="dropdownVisibles[record.id]" trigger="click">
              <a-button type="link" @click.prevent>
                {{ t('sys.configuration.action') }}
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1">
                    <a-popconfirm
                      @confirm="startconfirm(record, 'start')"
                      :title="t('sys.configuration.Isstart')"
                      :ok-text="t('sys.configuration.comfig')"
                      :cancel-text="t('sys.configuration.cancel')"
                    >
                      <a-button type="link">{{ t('sys.configuration.start') }}</a-button>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-popconfirm
                      @confirm="startconfirm(record, 'restart')"
                      :title="t('sys.configuration.Isstart')"
                      :ok-text="t('sys.configuration.comfig')"
                      :cancel-text="t('sys.configuration.cancel')"
                    >
                      <a-button type="link">{{ t('sys.analysis.restart') }}</a-button>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item key="3">
                    <a-popconfirm
                      @confirm="startconfirm(record, 'kill')"
                      :title="t('sys.configuration.Iscease')"
                      :ok-text="t('sys.configuration.comfig')"
                      :cancel-text="t('sys.configuration.cancel')"
                    >
                      <a-button type="link">{{ t('sys.configuration.cease') }}</a-button>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      bordered
      width="80%"
      v-model:open="drawerTaskcount"
      title="任务上限列表"
      centered
      @ok="drawerTaskcount = false"
    >
      <a-table
        :scroll="{ x: 1000, y: 700 }"
        @change="gatherhandleTableChange"
        :pagination="gatherpagination"
        :columns="configTaskcountcolumns"
        :dataSource="gatherTaskcountdataSource1"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="orange">{{
              t('sys.configuration.notProgress')
            }}</a-tag>
            <a-tag v-if="record.status == 1" color="green">{{
              t('sys.configuration.inServiceover')
            }}</a-tag>
            <a-tag v-if="record.status == 2" color="cyan">{{
              t('sys.configuration.inService')
            }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'options'">
            <a-button v-if="record.status == 2" type="link">{{
              t('sys.configuration.stop')
            }}</a-button>
            <a-button v-if="record.status == 0 || record.status == 1" type="link">{{
              t('sys.configuration.Progress')
            }}</a-button>

            <a-popconfirm
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
  </PageWrapper>
</template>

<script setup>
  import { onMounted, ref, computed, h, watch } from 'vue';
  import { getRoleListByPage, queryUserGroupAllInfo } from '@/api/demo/system';
  import { useRouter } from 'vue-router';
  import {
    posttaskpage,
    posttasksave,
    postUserListPage,
    taskstatistics,
    deleteTask,
    getStatistics1,
    senddeviceNodecmd,
    posttaskupdate,
    getUserlsitrunAPI,
    deletelistTask,
  } from '@/api/demo/device';
  import { message } from 'ant-design-vue';
  import { configTaskNumcolumns, configTaskcountcolumns } from './account.data';
  import CardItem from '@/views/demo/newMenu/compunt/cardItem.vue';
  import { PlusOutlined, SearchOutlined, MinusOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { v } from 'vxe-table';

  const { t } = useI18n();
  const gatherTaskNumdataSourcm = ref([]);
  const dataSource = ref([]);
  const router = useRouter();
  const StatisticsInifoData = ref({
    listResponse: {
      allCount: 0,
      stopCount: 0,
      runingCount: 0,
      completeCount: 0,
      dataLackCount: 0,
      waitCount: 0,
      manualStartCount: 0,
      manualStopCount: 0,
    },
    detailResponse: {
      allCount: 0,
      stopCount: 0,
      runingCount: 0,
      waitCount: 0,
      manualStartCount: 0,
      manualStopCount: 0,
    },
  });
  const StatisticsInifo = ref({
    detail: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    process: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    avator: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    image: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
  });
  const dropdownVisibles = ref({});
  const startconfirm = (record, it) => {
    dropdownVisibles.value[record.id] = false;
    senddeviceNodecmd({ deviceMac: record.deviceMac, deviceNode: record.deviceNode, cmd: it }).then(
      (res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          initWindow();
        }
      },
    );
  };
  const columns = ref([
    {
      title: 'ID',
      dataIndex: 'taskId',
      key: 'taskId',
      width: 150,
    },
    {
      title: t('sys.script.columns.name'),
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: t('sys.accountList.school'),
      dataIndex: 'school',
      key: 'school',
      width: 150,
    },
    {
      title: t('sys.accountList.work'),
      dataIndex: 'work',
      key: 'work',
      width: 150,
    },
    {
      title: t('sys.accountList.city'),
      dataIndex: 'city',
      key: 'city',
      width: 150,
    },
    {
      title: t('sys.analysis.columns.liststatus'),
      dataIndex: 'listStatus',
      key: 'listStatus',
      width: 300,
    },
    {
      title: t('sys.analysis.columns.statisticResult'),
      dataIndex: 'statisticResult',
      key: 'statisticResult',
      width: 300,
    },
    {
      title:
        t('sys.analysis.columns.detailStatus') +
        '   (' +
        t('sys.configuration.taskprocess9') +
        '/' +
        t('sys.configuration.CollectedAlready') +
        '/' +
        t('sys.statistics1.label') +
        ')',
      dataIndex: 'detailStatus',
      key: 'detailStatus',
      width: 250,
    },
    {
      title: t('sys.accountList.windowCount'),
      dataIndex: 'windowCount',
      key: 'windowCount',
      width: 150,
    },
    {
      title: t('sys.informaionMatchaing.columns.createTime'),
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150,
    },
    {
      title: t('sys.script.columns.creadTime'),
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 150,
    },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
      width: 400,
    },
  ]);
  const userGroupOptions = ref([]);
  // const basePage = ref({
  //   current: 1,
  //   size: 10,
  // });
  const gatherdataSource = ref([]);
  const gathercolumns = ref([
    {
      title: t('sys.userlist.columns.taskId'),
      dataIndex: 'taskId',
      key: 'taskId',
      width: 200,
    },
    {
      title: t('sys.userlist.columns.taskprocess2'),
      dataIndex: 'detailStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.imageProcessStatus'),
      dataIndex: 'imageProcessStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.avatorStatus'),
      dataIndex: 'avatorStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.taskprocess5'),
      dataIndex: 'stateStatus',
      minWidth: 180,
    },
    // {
    //   title: t('sys.accountList.curretstatus'),
    //   dataIndex: 'type',
    //   key: 'type',
    //   width: 150,
    // },
    {
      title: t('sys.userlist.columns.dataSource'),
      dataIndex: 'dataSource',
      minWidth: 120,
    },
    // {
    //   title: t('sys.accountList.exceptionRecord'),
    //   dataIndex: 'exceptionRecord',
    //   key: 'exceptionRecord',
    //   width: 150,
    // },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
    },
  ]);
  const DrawerDetalsShow = ref(false);
  const gatherbasePage = ref({
    current: 1,
    size: 10,
  });
  const statusTypeList = ref([
    {
      title: t('sys.userlist.selectType.title1'),
      value: 0,
    },
    {
      title: t('sys.userlist.selectType.title2'),
      value: 1,
    },
    {
      title: t('sys.userlist.selectType.title3'),
      value: 2,
    },
    {
      title: t('sys.userlist.selectType.title4'),
      value: 3,
    },
    {
      title: t('sys.userlist.selectType.title5'),
      value: 4,
    },
    {
      title: t('sys.userlist.selectType.title6'),
      value: 5,
    },
    {
      title: t('sys.userlist.selectType.title7'),
      value: 6,
    },
    {
      title: t('sys.userlist.selectType.title8'),
      value: 7,
    },
    {
      title: t('sys.userlist.selectType.title9'),
      value: 8,
    },
  ]);
  const handleClick = (it) => {
    if (it == 0) {
      formState.value.listStatus = 0;
    } else if (it == 1) {
      formState.value.listStatus = 1;
    } else if (it == 2) {
      formState.value.listStatus = 3;
    } else if (it == 3) {
      formState.value.listStatus = 2;
    } else if (it == 4) {
      formState.value.listStatus = 4;
    } else if (it == 5) {
      formState.value.listStatus = 5;
    } else if (it == 6) {
      formState.value.listStatus = 6;
    }
    init();
  };
  const handleClick2 = (it) => {
    if (it == 0) {
      formState.value.detailStatus = 0;
    } else if (it == 1) {
      formState.value.detailStatus = 1;
    } else if (it == 2) {
      formState.value.detailStatus = 2;
    } else if (it == 3) {
      formState.value.detailStatus = 3;
    } else if (it == 4) {
      formState.value.detailStatus = 4;
    }
    init();
  };
  const frompropLIST = ref({
    prompt0: '',
  });
  const addFriend = (index) => {
    // 检查 frompropLIST 和 frompropLIST.value 是否存在
    if (!frompropLIST.value || !frompropLIST.value) {
      console.error(t('sys.task.frompropListNotInitialized'));
      return;
    }

    // 获取当前对象的所有键
    const keys = Object.keys(frompropLIST.value);

    // 确保键名唯一性：使用当前最大索引+1来创建新键，而不是依赖传入的index
    const maxIndex = keys.reduce((max, key) => {
      const num = parseInt(key.replace('prompt', ''));
      return isNaN(num) ? max : Math.max(max, num);
    }, 0);

    // 创建新的键名
    const newKey = `prompt${maxIndex + 1}`;

    // 添加新的空值字段
    frompropLIST.value[newKey] = '';

    // 强制触发响应式更新（在某些复杂场景下可能需要）
    // 这行代码在大多数情况下不是必需的，但可以确保UI正确更新
  };
  const formDetails = ref({});
  const loading = ref(true);
  const gatherloading = ref(true);
  const formState = ref({});
  const DrawerShow = ref(false);
  const drawerTaskcount = ref(false);
  const drawerTaskNum = ref(false);
  const gatherShow = ref(false);
  const gatherTaskId = ref(null);

  // 批量新增相关变量
  const BatchDrawerShow = ref(false);
  const batchFormState = ref({});
  const batchFrompropLIST = ref({
    prompt0: '',
  });
  const batchTaskPreview = ref([]);
  const batchSubmitting = ref(false);

  // 预览表格列定义
  const previewColumns = ref([
    {
      title: t('sys.task.serialNumber'),
      dataIndex: 'index',
      key: 'index',
      width: 60,
    },
    {
      title: t('sys.script.columns.name'),
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: t('sys.accountList.city'),
      dataIndex: 'city',
      key: 'city',
      width: 120,
    },
    {
      title: t('sys.accountList.work'),
      dataIndex: 'work',
      key: 'work',
      width: 120,
    },
    {
      title: t('sys.accountList.school'),
      dataIndex: 'school',
      key: 'school',
      width: 120,
    },
  ]);
  const gatherdetalsTaskconfirm = () => {
    deletelistTask(formDetails.value.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.task.deleteDetailSuccess'));
        DrawerDetalsShow.value = false;
        list();
      }
    });
  };
  const deleteFriend = (key) => {
    // 检查 frompropLIST 和 frompropLIST.value 是否存在
    if (!frompropLIST.value || !frompropLIST.value) {
      console.error('frompropLIST 未正确初始化');
      return;
    }

    // 检查要删除的键是否存在
    if (Object.prototype.hasOwnProperty.call(frompropLIST.value, key)) {
      // 删除对应的 key 字段
      delete frompropLIST.value[key];

      // 强制触发响应式更新
      frompropLIST.value = { ...frompropLIST.value };
    } else {
      console.warn(`${t('sys.task.keyToDelete')} ${key} ${t('sys.task.notExist')}`);
    }
  };
  const drawerTaskcountBoxClick = (e) => {
    // drawerTaskcount.value = true;
    router.push({
      path: '/userList',
      query: {
        taskId: e.taskId,
      },
    });
  };
  const windowid = ref(null);
  const drawerTaskNumBoxClick = (record) => {
    drawerTaskNum.value = true;
    windowid.value = record.taskId;
    initWindow();
  };
  const initWindow = () => {
    getUserlsitrunAPI({ taskSuperId: windowid.value }).then((res) => {
      if (res.code == 200) {
        gatherTaskNumdataSourcm.value = res.data;
      }
    });
  };
  const addClcick = () => {
    DrawerShow.value = true;
    frompropLIST.value = {
      prompt0: '',
    };
    addqueryUserGroupAllInfo();
  };
  const addqueryUserGroupAllInfo = () => {
    queryUserGroupAllInfo().then((res) => {
      userGroupOptions.value = res.items;
    });
  };
  // 批量新增相关方法
  const batchAddClick = () => {
    BatchDrawerShow.value = true;
    batchFormState.value = {};
    batchFrompropLIST.value = {
      prompt0: '',
    };
    addqueryUserGroupAllInfo();
    batchTaskPreview.value = [];
  };

  // 生成批量任务预览
  const generateBatchTaskPreview = () => {
    const names = batchFormState.value.names
      ? batchFormState.value.names.split('\n').filter((name) => name.trim())
      : [];
    const cities = batchFormState.value.cities
      ? batchFormState.value.cities.split('\n').filter((city) => city.trim())
      : [];

    const tasks = [];
    let index = 1;

    // 如果名称和城市都为空，则不生成任务
    if (names.length === 0 && cities.length === 0) {
      batchTaskPreview.value = [];
      return;
    }

    // 如果只有名称没有城市，每个名称生成一个任务
    if (names.length > 0 && cities.length === 0) {
      names.forEach((name) => {
        tasks.push({
          index: index++,
          name: name.trim(),
          city: '',
          work: batchFormState.value.work || '',
          school: batchFormState.value.school || '',
        });
      });
    }
    // 如果只有城市没有名称，每个城市生成一个任务
    else if (cities.length > 0 && names.length === 0) {
      cities.forEach((city) => {
        tasks.push({
          index: index++,
          name: '',
          city: city.trim(),
          work: batchFormState.value.work || '',
          school: batchFormState.value.school || '',
        });
      });
    }
    // 如果名称和城市都有，生成笛卡尔积
    else {
      names.forEach((name) => {
        cities.forEach((city) => {
          tasks.push({
            index: index++,
            name: name.trim(),
            city: city.trim(),
            work: batchFormState.value.work || '',
            school: batchFormState.value.school || '',
          });
        });
      });
    }

    batchTaskPreview.value = tasks;
  };

  // 批量新增prompt规则管理
  const addBatchFriend = (index) => {
    if (!batchFrompropLIST.value || !batchFrompropLIST.value) {
      console.error(t('sys.task.batchFrompropListNotInitialized'));
      return;
    }

    const keys = Object.keys(batchFrompropLIST.value);
    const maxIndex = keys.reduce((max, key) => {
      const num = parseInt(key.replace('prompt', ''));
      return isNaN(num) ? max : Math.max(max, num);
    }, 0);

    const newKey = `prompt${maxIndex + 1}`;
    batchFrompropLIST.value[newKey] = '';
  };

  const deleteBatchFriend = (key) => {
    if (!batchFrompropLIST.value || !batchFrompropLIST.value) {
      console.error('batchFrompropLIST 未正确初始化');
      return;
    }

    if (Object.prototype.hasOwnProperty.call(batchFrompropLIST.value, key)) {
      delete batchFrompropLIST.value[key];
      batchFrompropLIST.value = { ...batchFrompropLIST.value };
    } else {
      console.warn(`${t('sys.task.keyToDelete')} ${key} ${t('sys.task.notExist')}`);
    }
  };

  // 批量提交
  const onBatchFinish = async (values) => {
    if (batchTaskPreview.value.length === 0) {
      message.warning(t('sys.task.pleaseEnterNameOrCity'));
      return;
    }

    batchSubmitting.value = true;

    try {
      const tasks = batchTaskPreview.value.map((task) => ({
        ...batchFormState.value,
        name: task.name,
        city: task.city,
        prompt: JSON.stringify(batchFrompropLIST.value),
      }));

      // 批量提交任务
      const promises = tasks.map((task) => posttasksave(task));
      await Promise.all(promises);

      message.success(t('sys.task.successfullyBatchAddedTasks', { count: tasks.length }));
      BatchDrawerShow.value = false;
      batchFormState.value = {};
      batchTaskPreview.value = [];
      init();
    } catch (error) {
      console.error('批量新增任务失败:', error);
      message.error('批量新增任务失败，请重试');
    } finally {
      batchSubmitting.value = false;
    }
  };
  const Taskconfirm = (e) => {
    deleteTask(e.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        init();
      }
    });
  };

  const TaskconfirmStop = (e, it) => {
    let params = {};
    if (it == 1) {
      params = {
        id: e.id,
        listStatus: 5,
      };
    } else {
      params = {
        id: e.id,
        listStatus: 6,
      };
    }

    posttaskupdate(params).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const TaskconfirmDetalisStop = (e, it) => {
    let params = {};
    if (it == 1) {
      params = {
        id: e.id,
        detailStatus: 3,
      };
    } else {
      params = {
        id: e.id,
        detailStatus: 4,
      };
    }

    posttaskupdate(params).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const gatherTaskconfirm = (e) => {
    deletelistTask(e.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        list();
      }
    });
  };
  const drawerDetalisBoxClick = (e) => {
    // 跳转userList页面
    gatherShow.value = false;
    router.push({
      path: '/userList',
      query: {
        userId: e.taskId,
      },
    });
    // gettaskuserinfo(e.taskId).then((res) => {
    //   if (res.code == 200) {
    //     DrawerDetalsShow.value = true;
    //     if (res.data) {
    //       formDetails.value = res.data;
    //     } else {
    //       message.warning('暂无数据');
    //     }
    //   }
    // });
  };
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const gatherpagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const onFinish = (values) => {
    console.log(values, frompropLIST.value);
    formState.value.prompt = JSON.stringify(frompropLIST.value);
    posttasksave(formState.value).then((res) => {
      if (res.code == 200) {
        DrawerShow.value = false;
        formState.value = {};
        message.success(t('sys.task.addTaskSuccess'));
        init();
      }
    });
  };
  const rolesList = ref({});
  const rolesListID = ref(null);
  const drawerBoxClick = (record) => {
    gatherShow.value = true;
    gatherTaskId.value = record.taskId;

    list();
  };
  const list = () => {
    gatherloading.value = true;
    postUserListPage({
      superTaskId: gatherTaskId.value,
      size: gatherpagination.value.pageSize,
      current: gatherpagination.value.current,
    }).then((res) => {
      if (res.code == 200) {
        gatherdataSource.value = res.data.records;
        gatherpagination.value.total = res.data.total;
      }
    });
    getStatistics1({ taskSuperId: gatherTaskId.value }).then((res) => {
      StatisticsInifo.value = res.data;
    });
  };
  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const gatherhandleTableChange = (e) => {
    gatherpagination.value = e;
    list();
  };
  const queryRef = () => {
    pagination.value.current = 1;
    init();
  };
  const init = () => {
    loading.value = true;
    posttaskpage({
      size: pagination.value.pageSize,
      current: pagination.value.current,
      ...formState.value,
    }).then((res) => {
      if (res.code == 200) {
        dataSource.value = res.data.records;
        pagination.value.total = res.data.total;
        loading.value = false;
      }
    });
    rolesList.value = JSON.parse(localStorage.getItem('rolesList'));
    rolesListID.value = rolesList.value.find((item) => item.roleId === 1);

    if (rolesListID.value) {
      gathercolumns.value.splice(4, 0, {
        title: t('sys.userlist.columns.taskprocess3'),
        dataIndex: 'imageStatus',
        minWidth: 180,
      });
    }
    taskstatistics().then((res) => {
      if (res.code == 200) {
        StatisticsInifoData.value = res.data;
      }
    });
  };
  const statudetailsList = ref([
    {
      title: t('sys.configuration.hasnotProgress'),
      value: 0,
    },
    {
      title: t('sys.configuration.inService'),
      value: 1,
    },
    {
      title: t('sys.configuration.waiting'),
      value: 2,
    },
    {
      title: t('sys.configuration.manualStart'),
      value: 3,
    },
    {
      title: t('sys.configuration.manualStop'),
      value: 4,
    },
  ]);
  const listStatusList = ref([
    {
      title: t('sys.configuration.hasnotProgress'),
      value: 0,
    },
    {
      title: t('sys.configuration.inService'),
      value: 1,
    },
    {
      title: t('sys.configuration.waiting'),
      value: 2,
    },
    {
      title: t('sys.configuration.listsucces'),
      value: 3,
    },
    {
      title: t('sys.configuration.datadeficiencies'),
      value: 4,
    },
    {
      title: t('sys.configuration.manualStart'),
      value: 5,
    },
    {
      title: t('sys.configuration.manualStop'),
      value: 6,
    },
  ]);
  onMounted(() => {
    init();
  });

  // 监听批量新增表单变化，自动生成预览
  watch(
    () => [batchFormState.value.names, batchFormState.value.cities],
    () => {
      generateBatchTaskPreview();
    },
    { deep: true },
  );
</script>
<style lang="less" scoped>
  .hover-change-color:hover {
    color: #1890ff; /* 这是Ant Design默认的主色调蓝色 */
    text-decoration: underline; /* 可选：添加下划线增强视觉反馈 */
  }
</style>
